Первая программа на Vue.js

В РАЗРАБОТКЕНЕ ДЛЯ НОВИЧКОВНЕ ОБЯЗАТЕЛЬНО

Разработчику Архитектору

Первая программа на Vue.js

Vue.js представляет собой прогрессивный фреймворк для создания пользовательских интерфейсов, сочетающий простоту интеграции с мощными возможностями реактивности. Создание первой программы позволяет познакомиться с ключевыми концепциями: шаблонами, реактивными данными, директивами и обработкой событий. В данном материале рассматривается создание приложения «Счетчик», демонстрирующее два подхода к реализации: современный Composition API (с использованием <script setup>) и классический Options API.

Создание проекта

Для начала работы требуется среда выполнения JavaScript — Node.js. Она обеспечивает возможность запуска инструментов сборки и управления зависимостями через пакетный менеджер npm.

Процесс инициализации нового проекта выполняется командой в терминале. Система автоматически создаст структуру папок, установит необходимые библиотеки Vue и настроит инструменты разработки. Рекомендуется использовать официальный инструмент Vite для максимальной скорости работы.

npm create vue@latest my-first-vue-app
cd my-first-vue-app
npm install
npm run dev

Команда npm create vue@latest запускает интерактивный мастер настройки. Мастер предложит выбрать дополнительные опции (TypeScript, роутер и т.д.), но для первого знакомства достаточно базовой установки. После выбора опций создается директория проекта. Переход в эту директорию (cd) и установка зависимостей (npm install) подготавливают окружение. Запуск команды npm run dev инициирует локальный сервер разработки. Приложение становится доступным по адресу, указанному в терминале (обычно http://localhost:5173).

Компонент с Composition API

Современный стандарт разработки в Vue использует Composition API, который предоставляет гибкость в организации логики компонента. Синтаксис <script setup> упрощает код, делая переменные глобальными внутри шаблона без необходимости явного экспорта.

Основная логика приложения находится в файле src/App.vue. Компонент импортирует функции реактивности из библиотеки Vue. Функция ref создает реактивную переменную, а функция toRefs или прямое использование переменной обеспечивает обновление интерфейса при изменении данных.

<script setup>
import { ref } from 'vue'

// Реактивные переменные состояния
const count = ref(0)
const name = ref('')

// Методы для работы со счетчиком
const increment = () => {
  count.value++
}

const decrement = () => {
  count.value--
}

const reset = () => {
  count.value = 0
}

// Обработчик ввода имени
const handleNameChange = (event) => {
  name.value = event.target.value
}
</script>

<template>
  <div class="app">
    <h1>Моя первая программа на Vue.js</h1>
    
    <!-- Блок с приветствием -->
    <div class="greeting">
      <input 
        type="text" 
        placeholder="Введите ваше имя" 
        v-model="name"
      />
      <h2 v-if="name">Привет, {{ name }}! 👋</h2>
    </div>

    <!-- Блок со счетчиком -->
    <div class="counter">
      <h2>Счетчик: {{ count }}</h2>
      <div class="buttons">
        <button @click="decrement">-</button>
        <button @click="reset">Сброс</button>
        <button @click="increment">+</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.app {
  text-align: center;
  padding: 40px;
  font-family: Arial, sans-serif;
}

.greeting {
  margin: 30px 0;
  padding: 20px;
  background: #f0f0f0;
  border-radius: 10px;
}

input {
  padding: 10px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 5px;
  margin-right: 10px;
}

button {
  margin: 0 5px;
  padding: 10px 20px;
  font-size: 16px;
  background: #42b883; /* Фирменный зеленый цвет Vue */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background: #3aa876;
  transform: scale(1.05);
}

.counter {
  margin: 30px 0;
  padding: 20px;
  background: #e8f4f8;
  border-radius: 10px;
}
</style>

Функция ref оборачивает значение в объект реактивности. Для изменения значения в скрипте используется свойство .value (например, count.value++). В шаблоне (внутри тега <template>) точка .value не нужна; Vue автоматически раскрывает значение.

Директива v-model создает двунаправленную связь между полем ввода и переменной состояния. При изменении текста в поле переменная name обновляется мгновенно, и наоборот. Директива v-if управляет условным рендерингом: элемент отображается только если условие истинно. Интерполяция данных осуществляется через двойные фигурные скобки {{ }}.

Обработка событий происходит через директиву @click, которая является сокращением от v-on:click. Значение события передается в функцию как аргумент.

Компонент с Options API

До широкого распространения Composition API основным способом создания компонентов был подход Options API. Компоненты определяются как объекты с разделенными секциями: данные, методы, вычисляемые свойства и жизненный цикл. Этот подход остается актуальным и часто используется в крупных проектах.

<script>
export default {
  name: 'App',
  data() {
    return {
      count: 0,
      name: ''
    }
  },
  methods: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    },
    reset() {
      this.count = 0
    },
    handleNameChange(event) {
      this.name = event.target.value
    }
  }
}
</script>

<template>
  <div class="app">
    <h1>Моя первая программа на Vue.js</h1>
    
    <div class="greeting">
      <input 
        type="text" 
        placeholder="Введите ваше имя" 
        v-model="name"
      />
      <h2 v-if="name">Привет, {{ name }}! 👋</h2>
    </div>

    <div class="counter">
      <h2>Счетчик: {{ count }}</h2>
      <div class="buttons">
        <button @click="decrement">-</button>
        <button @click="reset">Сброс</button>
        <button @click="increment">+</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* Те же стили, что и в варианте с Composition API */
.app {
  text-align: center;
  padding: 40px;
  font-family: Arial, sans-serif;
}
/* ... остальные стили ... */
</style>

Свойство data возвращает объект, содержащий исходное состояние компонента. Свойство methods содержит функции, которые могут быть вызваны из шаблона. Внутри методов обращение к данным осуществляется через this.

Vue автоматически делает свойства объекта data реактивными. Изменение значения this.count вызывает перерисовку шаблона. Директивы v-model и v-if работают идентично варианту с Composition API.

Стилизация интерфейса

Внешний вид приложения задается блоком <style scoped> внутри файла .vue. Атрибут scoped гарантирует, что стили применяются только к текущему компоненту, предотвращая конфликты с глобальными стилями.

CSS правила определяют расположение, цвета, шрифты и поведение элементов при взаимодействии. Цвета подобраны в соответствии с фирменным стилем Vue (зеленый оттенок).

.app {
  text-align: center;
  padding: 40px;
  font-family: Arial, sans-serif;
}

.greeting {
  margin: 30px 0;
  padding: 20px;
  background: #f0f0f0;
  border-radius: 10px;
}

input {
  padding: 10px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 5px;
  margin-right: 10px;
}

button {
  margin: 0 5px;
  padding: 10px 20px;
  font-size: 16px;
  background: #42b883;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background: #3aa876;
  transform: scale(1.05);
}

.counter {
  margin: 30px 0;
  padding: 20px;
  background: #e8f4f8;
  border-radius: 10px;
}

Правило .app центрирует контент и добавляет внутренние отступы. Блок приветствия имеет серый фон и скругленные углы. Поля ввода имеют фиксированный размер шрифта и рамку. Кнопки окрашены в фирменный зеленый цвет Vue, имеют плавный переход цвета и эффект масштабирования при наведении курсора.

Основные концепции приложения

Приложение демонстрирует фундаментальные принципы работы Vue.

Реактивность — это механизм автоматического обновления интерфейса при изменении данных. Vue отслеживает зависимости между данными и DOM. Любое изменение реактивной переменной вызывает перерисовку соответствующих частей страницы.

Шаблоны — это декларативное описание структуры UI с использованием расширенного синтаксиса HTML. Директивы (предфикс v-) добавляют специфическое поведение элементам.

Двунаправленное связывание — удобная абстракция для форм. Директива v-model объединяет работу свойств value и события input, избавляя разработчика от написания громоздкого кода для синхронизации данных.

Условный рендеринг позволяет показывать или скрывать элементы. Директива v-if удаляет элемент из DOM полностью, если условие ложно, что экономит ресурсы при работе с тяжелыми элементами.

Компоненты представляют собой изолированные единицы кода с собственными данными, методами и стилями. Vue поддерживает вложенность компонентов любой глубины.

Расширение функционала

Полученное приложение служит базой для дальнейших экспериментов. Разработчики могут добавлять новые функции, изучая механизмы работы с данными и интерфейсом.

Добавление кнопки умножения счетчика на два требует объявления новой функции и подключения её к интерфейсу.

const multiply = () => {
  count.value *= 2
}

В шаблоне:

<button @click="multiply">×2</button>

Создание списка задач (Todo list) предполагает использование массива в качестве состояния. Элементы массива добавляются, удаляются и маркируются как выполненные.

Таймер реализуется с помощью хука onMounted из модуля vue, который запускает интервал при монтировании компонента и очищает его при размонтировании.

Калькулятор демонстрирует работу с несколькими переменными состояния и сложной логикой вычислений.

Пошаговый запуск

Для успешного запуска приложения необходимо выполнить последовательность действий.

Скачайте и установите Node.js с официального сайта nodejs.org.
Откройте терминал или командную строку.
Выполните команду npm create vue@latest my-first-vue-app. Выберите базовые опции (JavaScript, нет TypeScript, нет роутера).
Перейдите в созданную директорию командой cd my-first-vue-app.
Установите зависимости командой npm install.
Откройте файл src/App.vue и замените его содержимое кодом примера.
Запустите локальный сервер командой npm run dev.

Браузер автоматически откроет страницу приложения. Любые изменения в коде сохраняются и мгновенно отображаются на странице благодаря системе горячей перезагрузки.